<template>
    <div>
       <el-row>
           <el-col  :span="6">
               <img src="//gss0.bdstatic.com/8r1VfDn-KggZnd_b8IqT0jB-xx1xbK/static/common/nis_index/sub/img/re-logo_7c90a10.png" >
               <div class="location">
                   <i class="el-icon-location"></i>
                   <span class="city">上海</span>
               </div>
           </el-col>
           <el-col :span="13">
               <div class="searchbar">
                   <input type="text" placeholder="搜索商家/地点">
                   <el-button type="warning">警告按钮</el-button>
               </div>
           </el-col>
           <el-col class="col-three" :span="5">
               <div class="tui">
                   <span class="iconfont">&#xe659;</span>
                   <span>|  </span>
                   <span class="iconfont right">&#xe65e;</span>
               </div>
               <div class="show">未消费随便退</div>
           </el-col>
       </el-row>
    </div>
</template>

<script>
export default {
    name: 'TopBar'
}
</script>

<style lang="stylus" scoped>
    .el-row
        width: 1210px;
        height: 90px;
        margin: 0 auto;
        .el-col
            cursor: pointer;
            display: flex;
            img
                width: 165px;
                height: 57px;
                margin-top: 20px;
            .location
                margin-top: 45px;
                margin-left: 30px;
                i
                    color: #B08C4A;
                .city
                    font-size: 14px;
            .searchbar
                width: 580px;
                height: 65px;
                display: flex;

                input
                    width: 466px;
                    height: 33px;
                    border: 2px solid #B08C4A;
                    outline: none;
                    margin-top: 30px;
                    margin-left: 20px;
                    font-size: 14px;
                    color: #333;
                .el-button
                    height: 40px;
                    width: 110px;
                    margin-top: 29px;
                    margin-left: -1px;
        .col-three:hover {
            .show {
                display: block;
            }
        }
        .tui
            width: 100px;
            height: 40px;
            background: #FFF8EB;
            border: 1px solid #EDE3CE;
            margin-top: 26px;
            position: relative;
            span:nth-child(1)
                // margin-top: 33px;
                font-size: 30px;
                position: absolute;
                top:  5px;
                left: 5px;
                color: #B08C4A; 
            span:nth-child(3)
                font-size: 29px;
                position: absolute;
                right: 5px;
                top: 3px;
                color: #B08C4A;
            span:nth-child(2)
                position: absolute;
                top: 8px;
                right: 46px;
                color: #B08C4A;
        .show
            position: relative;
            top: 69px;
            right: 101px;
            width: 100px;
            height: 30px;
            padding-top: 11px;
            text-align: center; 
            font-size: 13px;
            box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
            display: none;
</style>


